<template>
  <div class="datail">
    <h2>票房明细</h2>
    <div class="datail-box">
      <div>
        <div v-for="(v, i) in arr" :key="i" class="date">
          {{ v.data }}
        </div>
      </div>
      <div class="message">
        <ul class="AllMessage" v-for="(v, i) in arr" :key="i">
          <li>{{ v.sumUp }}</li>
          <li>{{ v.proportion }}</li>
          <li>{{ v.price }}</li>
          <li>{{ v.filmSchedule }}</li>
          <li>{{ v.return }}</li>
          <li>{{ v.rate }}</li>
          <li>{{ v.cat }}</li>
          <li>{{ v.catRate }}</li>
          <li>{{ v.num }}</li>
          <li>{{ v.net }}</li>
          <li>{{ v.gold }}</li>
          <li>{{ v.session }}</li>
          <li>{{ v.seatRate }}</li>
          <li>{{ v.seat }}</li>
          <li>{{ v.proportion }}</li>
          <li>{{ v.proportion }}</li>
          <li>{{ v.proportion }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import getLink from "@/api/getLink.js";

export default {
  data() {
    return {
      arr: [],
    };
  },

  mounted() {
    getLink("/api/movie/pz").then((res) => {
      this.arr = res.data;
    });
  },
};
</script>

<style scoped>
.datail-box {
  display: flex;
  justify-content: space-between;
}

.datail {
  margin-top: 0.2rem;
  padding: 0.3rem;
  background: #fff;
}
h2 {
  font-size: 0.3rem;
  height: 1rem;
  font-weight: 700;
}

.date {
  width: 2rem;
word-wrap:break-word;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  background-color: #fff;
  text-align: center;
}

.message {
  overflow-x: auto;
  background: #f2f2f2;
}

.message::-webkit-scrollbar {
  display: none;
}

.AllMessage {
  width: 24rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.AllMessage li {
  width: 2rem;
  text-align: center;
  height: 1rem;
  line-height: 1rem;
}
</style>